<template>
    <div class="appmain">
        <div class="main-child">
            <div class="txun">腾讯滨海大厦</div>
            <div class="stytr">
                <div class="styfive">·&nbsp;{{(new Date()).getMonth() + 1}}月写字楼建筑总排名
                    <span class="ranking"><span style="position:relative;top:-7px;">第&nbsp;<i class="fontyellow">1</i>&nbsp;名&nbsp;</span><img src="../../../assets/img/gold.png" style="width:23px;position:relative;top:-2px;" alt=""></span>
                </div>
                <div class="detail">
                    <span class="iconfont icon-zichanjiazhi"></span>
                    <div class="detail-1">每平方米能耗</div>
                    <div class="detail-2">123.54</div>
                    <div class="detail-3">kwh/天</div>
                    <div class="detail-4"></div>
                </div>
            </div>
            <div class="sty-pohoto">
                <div class="img"><img src="../../../assets/img/nk-3.png" alt=""></div>
                <div class="yetai">
                    <div>
                        <span class="iconfont icon-yetai span-one"></span>
                        <span class="positop fontcolor1 span-two">&nbsp;业&nbsp;态：</span>
                        <span class="positop fontcolor2 span-three">写字楼</span>
                    </div>
                    <div>
                        <span class="iconfont icon-zichanjiazhi span-one"></span>
                        <span class="positop fontcolor1 span-two">&nbsp;<span>资产价值</span>：</span>
                        <span class="span-three">
                            <span class="positop fontcolor2">20.6874&nbsp;</span>
                            <span class="positop fontcolor3">亿元</span>
                        </span>
                    </div>
                </div>
                <div class="yetai">
                     <div>
                        <span class="iconfont icon-jianzhumianji span-one"></span>
                        <span class="positop fontcolor1 span-two">&nbsp;建筑面积：</span>
                        <span class="span-three">
                            <span class="positop fontcolor3">约&nbsp;</span>
                            <span class="positop fontcolor2">358180.38&nbsp;</span>
                            <span class="positop fontcolor3">m²</span>
                        </span>
                    </div>
                    <div>
                        <span class="iconfont icon-wulianshebeijiancedianshu span-one"></span>
                        <span class="positop fontcolor1 teshufotn span-two">&nbsp;
                            <span class="teshufotn1">物联设备：</span>
                            <!-- <span class="teshufotn2">数字监测</span> -->
                            <!-- <span class="dian">：</span> -->
                        </span>
                        <span class="span-three">
                            <span class="positop fontcolor2">812,354&nbsp;</span>
                            <span class="positop fontcolor3">个</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="sty-foot">
                <div class="jianzhu">
                     <div>
                        <span class="iconfont icon-shineiwendu span-one"></span>
                        <span class="positop fontcolor1 span-two">&nbsp;室内温度：</span>
                        <span class="span-three">
                            <span class="positop fontcolor2">25.62&nbsp;</span>
                            <span class="positop fontcolor3">℃</span>
                        </span>
                    </div>
                    <div>
                        <span class="iconfont icon-PM span-one"></span>
                        <span class="positop fontcolor1 span-two">&nbsp;PM2.5：</span>
                        <span class="span-three">
                            <span class="positop fontcolor2">80&nbsp;</span>
                            <span class="positop fontcolor3">ug/m³</span>
                        </span>
                    </div>
                </div>
                <div class="jianzhu">
                     <div>
                        <span class="iconfont icon-shineiCO span-one"></span>
                        <span class="positop fontcolor1 span-two">&nbsp;室内CO₂：</span>
                        <span class="span-three">
                            <span class="positop fontcolor2">647.31&nbsp;</span>
                            <span class="positop fontcolor3">ppm</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'appmain'
}
</script>
 <style lang="scss" scoped>
$colorwhite:white;
$colorblue:#16cdff;
$bordercolor:#172231;
$borderbottom:#10325d;
$iconcolor:#006fff;
$fontcolor1:#939393;
$fontcolor2:#ffffff;
$fontcolor3:#00a0e9;
.appmain{
    height: 100%;
    margin-top: 50px;
    min-width: 497px;
    box-sizing: border-box;
    position: absolute;
    right: 20px;
    .main-child{
        height: 80%;
        width: 100%;
        position: absolute;
        top:10%;
        padding: 20px;
        // background-color: #006fff;
        .txun{
            height: 50px;
            line-height: 50px;
            width: 105%;
            padding-left:25px;
            background: url("../../../assets/img/title.png") no-repeat;
            background-size:100% 100%;
            color: $colorwhite;
            font-size: 0.14rem;
            position: relative;
            right: 8px;
        }
        .stytr{
            width: 100%;
            font-size: 0.15rem;
            color: white;
            background: rgba($color: #000000, $alpha: 0.5);
            margin-top: 13px;
            border: 1px solid $bordercolor;
            box-shadow: 0px 0px 7px 3px rgba(22, 64, 117, 0.8) inset;
            .styfive{
                border-bottom: 2px solid $borderbottom;
                padding: 10px;
            }
            .ranking{
                float:right;
                .fontyellow{
                    font-size: 19px;
                    color: yellow;
                    font-style:normal
                }
            }
            .detail{
                width: 100%;
                padding: 10px;
                margin:0;
                font-size: 0;
                height: 55px;
                span{
                    float: left;
                    width: 7%;
                    height: 35px;
                    background: rgba($color: #325a8f, $alpha: 0.8);
                    position: relative;
                    line-height: 35px;
                    text-align: center;
                }
                div{
                    float: left;
                    width: 30%;
                    text-align: center;
                    height: 35px;
                    line-height: 35px;
                    font-size: 0.14rem;
                }
                .detail-1{
                    background: rgba($color: #325a8f, $alpha: 0.6);
                    margin-left: 1px;
                }
                .detail-2{
                    background: rgba($color: #325a8f, $alpha: 0.4);
                    margin-left: 1px;
                }
                .detail-3{
                    background: rgba($color: #325a8f, $alpha: 0.4);
                }
                .detail-4{
                    width: 2%;
                    height: 35px;
                    line-height: 35px;
                    background: rgba($color: #325a8f, $alpha: 0.6);
                    float: left;
                }
            }
        }
        .sty-pohoto{
            height: 60%;
            width: 100%;
            font-size: 0.15rem;
            background: rgba($color: #000000, $alpha: 0.5);
            margin-top: 13px;
            border: 1px solid $bordercolor;
            box-shadow: 0px 0px 7px 3px rgba(22, 64, 117, 0.8) inset;
            .img{
                width: 100%;
                height: 75%;
                border-bottom: 2px solid $borderbottom;
                img{
                    width: 100%;
                    height: 100%;
                    background-size: 100% 100%;
                }
            }
        }
        .yetai{
                height: 12%;
                width: 100%;
                margin: 0px;
                font-size: 0px;
                line-height: 50px;
                padding-left: 10px;
                div{
                    display: inline-block;
                    width: 50%;
                    height: 100%;
                    .span-one{
                        width: 10%;
                        display: inline-block;
                        text-align: left;
                    }
                    .span-two{
                        width: 36%;
                        display: inline-block;
                    }
                    .span-three{
                        width: 54%;
                        display: inline-block;
                    }
                    .positop{
                        position: relative;
                        top: -2px;
                    }
                    .fontcolor1{
                        color: $fontcolor1;
                    }
                    .fontcolor2{
                        color: $fontcolor2;
                    }
                    .fontcolor3{
                        color: $fontcolor3;
                    }
                }
                .iconfont{
                    color: $iconcolor;
                    font-size: 0.21rem;
                    font-weight: 500;
                    animation:myfirst 1s infinite alternate; 
                }
        }
        .sty-foot{
            height: 15%;
            width: 100%;
            font-size: 0.15rem;
            background: rgba($color: #000000, $alpha: 0.5);
            margin-top: 13px;
            border: 1px solid $bordercolor;
            box-shadow: 0px 0px 7px 3px rgba(22, 64, 117, 0.8) inset;
        }
        .jianzhu{
                height: 50%;
                // height: 11%;
                width: 100%;
                margin: 0px;
                font-size: 0px;
                line-height: 50px;
                padding-left: 10px;
                div{
                    display: inline-block;
                    width: 50%;
                    height: 100%;
                    .span-one{
                        width: 10%;
                        display: inline-block;
                        text-align: left;
                    }
                    .span-two{
                        width: 36%;
                        display: inline-block;
                    }
                    .span-three{
                        width: 54%;
                        display: inline-block;
                    }
                    .positop{
                        position: relative;
                        top: -2px;
                    }
                    .fontcolor1{
                        color: $fontcolor1;
                    }
                    .fontcolor2{
                        color: $fontcolor2;
                    }
                    .fontcolor3{
                        color: $fontcolor3;
                    }
                }
                .iconfont{
                    color: $iconcolor;
                    font-size: 0.21rem;
                    font-weight: 500;
                    animation:myfirst 1s infinite alternate; 
                }
        }
    }
}
@keyframes myfirst  
{  
0%   {color:#0851ae;font-weight: 600}  
10%  {color:#094ba1;font-weight: 600}
25%  {color:#094ba1;font-weight: 600}
50%  {color:#0a52af;font-weight: 600} 
75%  {color:#125bb9;font-weight: 600} 
90%  {color:#1575f3;font-weight: 600} 
100% {color:#1575f3;font-weight: 600}  
} 
</style>
